import Snap from "@aibee/snapsvg";

export class SnapTest {
    ctx: Snap.Paper;
   public clippath: Snap.Element | undefined;
    constructor(public id: string) {
        this.ctx = Snap(id)
    }
    private gDemo(svg: Snap.Paper) {
        return svg.g();
    }
    svgelement() {
        const g = this.gDemo(this.ctx)
        g.rect(0, 0, 820, 186).attr({
            fill: "transparent"
        })

        const clip = this.gDemo(g)
        let d = 'M159.674 0C155.401 0 151.306 1.70921 148.3 4.74677L19.1848 135.247C18.0734 136.37 17.45 137.886 17.45 139.467V181H18.7817L153.225 30.3467C156.261 26.9451 160.604 25 165.163 25H654.864C659.404 25 663.73 26.9284 666.765 30.3049L802.199 181H802.548V139.467C802.548 137.886 801.924 136.37 800.813 135.247L671.693 4.74661C668.688 1.70915 664.592 0 660.32 0H159.674Z'
        clip.path(d).attr({
            'fill-rule': "evenodd",
            'clip-rule': "evenodd",
            fill: "#1F1F1F",
        })
        d = 'M153.263 28.0227C156.286 24.8171 160.498 23 164.904 23H655.096C659.502 23 663.714 24.8171 666.737 28.0227L800.824 170.209C804.674 174.292 801.779 181 796.168 181H23.8324C18.2206 181 15.3261 174.292 19.1763 170.209L153.263 28.0227Z'
        this.clippath = clip.path(d).attr({
            fill: "rgb(124, 174, 70)",
        })
        d = 'M17.4492 174H802.551V180C802.551 183.314 799.864 186 796.551 186H23.4492C20.1355 186 17.4492 183.314 17.4492 180V174Z'
        clip.path(d).attr({
            fill: "#9C805F",
        })
        console.log(this.clippath.getBBox());
       const {cx,cy}= this.clippath.getBBox()
        clip.ellipse(0,158,2,2)
        
    }
}